<template>
  <div class="mb-4">
    <el-button type="success" class="edit" @click="chooseExportExcel">选择导出</el-button>
    <el-button type="primary" class="edit" @click="batchExportExcel">批量导出</el-button>
  </div>
  <el-dialog
      v-model="importDialog"
      title="导入Excel文件"
      width="500"
      align-center
  >
    <!--手动发送请求 http-request ajax-->
    <el-upload
        ref="uploadRef"
        class="upload-demo"
        method="post"
        :auto-upload="false"
        :http-request=uploadRequest
        accept='.xlsx, .xls'
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <div>注意：</div>
      <ul>
        <li>请上传.xls或者xlsx的文件</li>
      </ul>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="importDialog = false">取消</el-button>
        <el-button class="ml-3" type="success" @click="submitUpload">
          点击上传
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-table :data="clueList"
            style="width: 100%"
            @selection-change="selectionChange"
  >
    <el-table-column type="selection" width="30" />
    <el-table-column type="index" label="序号" width="70"/>
    <el-table-column property="ownerName" label="负责人" />
    <el-table-column property="activityName" label="所属活动" width="150"/>
    <el-table-column property="fullName" label="姓名" />
    <el-table-column property="appellationName" label="称呼"/>
    <el-table-column property="phone" label="手机" show-overflow-tooltip width="120"/>
    <el-table-column property="weixin" label="微信" show-overflow-tooltip width="120"/>
    <el-table-column property="qq" label="qq" show-overflow-tooltip width="120"/>
    <el-table-column property="email" label="邮箱" show-overflow-tooltip width="120"/>
    <el-table-column property="age" label="年龄" show-overflow-tooltip width="70"/>
    <el-table-column property="job" label="职业" show-overflow-tooltip />
    <el-table-column property="yearIncome" label="年收入" width="100" show-overflow-tooltip/>
    <el-table-column property="address" label="地址" width="150" show-overflow-tooltip/>
    <el-table-column property="needLoanInfo" label="是否需要贷款" width="150" show-overflow-tooltip/>
    <el-table-column property="istateInfo" label="意向状态" show-overflow-tooltip/>
    <el-table-column property="customerPro" label="意向产品" width="120" show-overflow-tooltip/>
    <el-table-column property="stateInfo" label="线索状态" width="120" show-overflow-tooltip/>
    <el-table-column property="sourceInfo" label="线索来源" width="160" show-overflow-tooltip/>
    <el-table-column property="nextContactTime" label="下次联系时间" width="200" show-overflow-tooltip/>
    <el-table-column label="操作" width="250">
<!--使用插槽获取用户信息-->
      <template #default="scope">
        <el-button type="primary" @click="details(scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <p></p>
  <p></p>
  <p></p>
    <el-pagination
        class="page"
        background
        :page-size=pageSize
        layout="prev, pager, next"
        @current-change="page"
        @prev-click="page"
        @next-click="page"
        :total=total />
</template>

<script>
import {doDelete, doGet} from "@/http/httpRequest";
import {confirmMessageTip, messageTip} from "@/util/utils";
// eslint-disable-next-line no-unused-vars
import axios from "axios";

export default {
  name:"CustomerView",
  data(){
    return{
      clueList:[{}],
      pageSize:0,
      total:0,
      clueIdArray:[],
      clueUserSelect:[],
      activitySelect:[],
      appellationSelect:[],
      needLoadSelect:[],
      intentionStateSelect:[],
      intentionProductSelect:[],
      clueStateSelect:[],
      sourceSelect:[],
      productSelect:[],
      importDialog:false,
    }
  },
  //父页面的函数使用
  inject:['reload'],
  methods:{
    selectionChange(arr){
      this.clueIdArray = [];
      arr.forEach(clue =>{
        this.clueIdArray.push(clue.id);
      })
    },
    /**
     * 选择导出
     */
    chooseExportExcel(){
      if (this.clueIdArray.length === 0) {
        messageTip("请选择需要导出的客户！","warning")
      }else {
        confirmMessageTip("确定导出这些客户吗？").then(() =>{
          let token = window.sessionStorage.getItem("token");
          if (!token) {
            token = window.localStorage.getItem("token");
          }
          //创建js创建iframe标签
          let iframe = document.createElement("iframe");
          iframe.src = axios.defaults.baseURL + "/api/chooseExportExcel?ids=" + this.clueIdArray +"&Authorization=" + token;
          document.body.appendChild(iframe);
        }).catch(()=>{
          messageTip("导出取消","warning")
        })

      }

      //console.log( axios.defaults.baseURL + "/api/chooseExportExcel?clueId=" + this.clueIdArray +"&Authorization=" + token)
    },
    /**
     * 导出Excel
     */
    batchExportExcel() {
      let token = window.sessionStorage.getItem("token");
      if (!token) {
        token = window.localStorage.getItem("token");
      }
      //创建js创建iframe标签
      let iframe = document.createElement("iframe");
      iframe.src = axios.defaults.baseURL + "/api/exportExcel?Authorization=" + token;
      document.body.appendChild(iframe);
    },
    getClueInfo(current){
      doGet("/api/customers",{
        current:current
      }).then(res =>{
        if (res.data.code === 200) {
          this.clueList = res.data.data.list;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
        }
      })
    },
    /**
     * 加载用户下拉框选项
     */
    loadUserSelect(){
      //加载负责人
      doGet("api/loadUserSelect",{}).then(res =>{
        if (res.data.code === 200) {
          this.clueUserSelect = res.data.data;
        }else {
          messageTip("加载负责人下拉选项失败","error")
        }
      })
    },
    /**
     * 加载活动下拉框
     *
     */
    loadActivitySelect() {
      doGet("api/loadActivitySelect",{}).then(res =>{
        if (res.data.code === 200) {
          this.activitySelect = res.data.data;
        }else {
          messageTip("加载负责人下拉选项失败","error")
        }
      })
    },

    /**
     * 根据类型加载下拉框
     *
     */
    loadAppellationSelect(typeCode) {
      //2是称呼
      doGet("api/loadDicSelect",{
        select:typeCode
      }).then(res =>{
        if (res.data.code === 200) {
          if (typeCode === 'appellation'){
            this.appellationSelect = res.data.data;
          }

          if (typeCode === 'needLoan'){
            this.needLoadSelect = res.data.data;
          }

          if (typeCode === 'intentionState'){
            this.intentionStateSelect = res.data.data;
          }

          if (typeCode === 'clueState'){
            this.clueStateSelect = res.data.data;
          }

          if (typeCode === 'source'){
            this.sourceSelect = res.data.data;
          }

        }else {
          messageTip("加载失败","error")
        }
      })
    },
    /**
     * 加载产品列表
     *
     */
    loadProductSelect() {
      doGet("api/loadProductSelect",{}).then(res =>{
        if (res.data.code === 200) {
          this.productSelect = res.data.data
        }
      })
    },
    page(number) {
      this.getClueInfo(number)
    },
    details(id) {
      //跳转路由
      this.$router.push('/hello/customerDetail/' + id)
    },
    loadAllSelect(){
      //加载下拉框
      this.loadUserSelect();
      this.loadActivitySelect();
      this.loadAppellationSelect('appellation');
      this.loadAppellationSelect('needLoan');
      this.loadAppellationSelect('intentionState');
      this.loadAppellationSelect('clueState');
      this.loadAppellationSelect('source');
      this.loadProductSelect();
    },
    /**
     * 加载当前登录人信息
     */
    loadLoginInfo() {
      doGet("api/loadLoginInfo",{}).then(res =>{
        if (res.data.code === 200) {
          this.clueQuery.ownerId = res.data.data.id;
        }
      })
    },
    /**
     * 编辑线索
     * @param clueId
     */
    editClue(clueId){
        //编辑，新增共用一个弹窗。
      this.dialogFormVisible = true;
      //获取线索信息
      this.clueDetail(clueId);
    },
    /**
     * 批量删除
     */
    batchDelClue() {
      if (this.clueIdArray.length === 0){
        messageTip("请选择需要删除的用户！", "warning")
      }else {

        //批量删除用户
        confirmMessageTip('您确定要删除当前选中用户吗？').then(() => {
          let ids = this.clueIdArray.join(",")
          doDelete("api/clueDelBatch",{ids:ids}).then(res =>{
            if (res.data.code === 200){
              messageTip("删除成功", "success")
              this.reload();
            }else {
              messageTip("删除失败，原因是：" + res.data.msg, "error")
              this.reload();
            }
          })
        }).catch(()=>{
          messageTip("取消","warning")
        })
      }
    },
    /**
     * 获取线索信息
     * @param id
     */
    clueDetail(id) {
      this.loadAllSelect();
      doGet("api/clueDetail/" + id, {}).then(res =>{
        if (res.data.code === 200) {
          this.clueQuery = res.data.data;
        }
      })
    },

  },
  mounted() {
    //分页 默认第一页
    this.getClueInfo(1);
  }
}
</script>


<style scoped>
.edit{
  margin-bottom: 15px;
}

.page{
  display: flex;
  justify-content: center;
}
.el-table{
  overflow: auto;
}
</style>